<template>
  <div>
    <div style="display: inline-block; float: left;">
      <el-avatar :size="100" :src="comment.from_avatar">
      </el-avatar>
    </div>
    <div style="display:inline-block; float: left; margin-left: 10px; width: 79%">
      <div style="text-align: left; ">
        <span style="color: #FF7200; margin-left: -3px">
          {{comment.from_name}}
        </span>
      </div>
      <div style="text-align: justify; margin-top: 15px; width: 77%">
        <span >
          {{comment.content}}
        </span>
      </div>
      <div style="text-align: left; margin-top: 15px">
        {{comment.create_time}}
        &nbsp;&nbsp;&nbsp;
        <i :class=star style="cursor: pointer; font-size: 16px; color: red" @click="likeOrDislike">
          {{comment.like_num}}
        </i>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-button @click="replyComment(comment.from_name)">回复</el-button>
      </div>
      <div>
        <CommentPublish v-show="showReply" :user="user" :placeholder="placeholder"
                        style="transform: scale(0.9, 0.9);">

        </CommentPublish>
      </div>
      <div style="margin-top: 20px">
        <ul>
          <li v-for="item in comment.reply_comment">
            <SecondComment :comment="item" style="margin-left: 10px"></SecondComment>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import SecondComment from "@/components/Comment/SecondComment";
import CommentPublish from "@/components/Comment/CommentPublish";
export default {
  name: "一级评论",
  data(){
    return {
      like: 0,
      star: "el-icon-star-off",
      showReply: false,
      user: {
        avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png"
      },
      placeholder: ""
    }
  },
  components:{
    SecondComment,
    CommentPublish
  },
  props:{
    comment: Object
  },
  methods:{
    likeOrDislike: function (){
      if(this.like == 0){
        this.like=1;
        this.comment.like_num += 1
        this.star="el-icon-star-on"
      }else{
        this.like=0;
        this.comment.like_num -= 1
        this.star="el-icon-star-off"
      }
    },
    replyComment: function (from_name) {
      this.showReply = !this.showReply
      if (this.placeholder == ""){
        this.placeholder = this.placeholder + "@" + from_name
      }
    }
  }
}
</script>

<style scoped>

</style>